<template>
  <div>
    <!-- 头部面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/wlecome' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item :to="{path:'/categories'}">商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片区域 -->
    <el-card class="roles_card" style="margin-top: 10px">
        <!-- 添加分类按钮 -->
        <el-button @click="show_add_goods_fenleibox_onfun" type="primary">添加分类</el-button>
        <!-- 角色分类列表 -->
        <tree-table style="margin-top: 10px" :selection-type="false" children-prop="children" :expand-type="false" :data="goods_fenlei_data" :columns="column_config_data" :show-index="true" index-text="#" stripe border :show-row-hover="false">
            <!-- 是否有效 -->
            <template slot="is_del" slot-scope="scope">
                <i style="color: lightgreen; font-size:20px" v-if="scope.row.cat_deleted == false" class="el-icon-success"></i>
                <i style="color: red; font-size:20px" v-else class="el-icon-error"></i>
            </template>
            <!-- 排序 -->
            <template slot="short" slot-scope="scope">
                <el-tag v-if="scope.row.cat_level === 0" type="success">一级</el-tag>
                <el-tag v-else-if="scope.row.cat_level === 1" type="info">二级</el-tag>
                <el-tag v-else>三级</el-tag>
            </template>
            <template slot="setting">
                <el-button type="primary" icon="el-icon-edit">编辑</el-button>
                <el-button type="danger" icon="el-icon-delete">删除</el-button>
            </template>
        </tree-table>
        <!-- 列表分页 -->
          <el-pagination
            @size-change="size_change_onfun"
            @current-change="current_change_onfun"
            :current-page="lists_req_infor.pagenum"
            :page-sizes="[4, 10, 15, 20]"
            :page-size="lists_req_infor.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
    </el-card>
    <!-- 添加分类的弹出框 -->
    <el-dialog
        title="添加分类"
        :visible.sync="is_show_add_fenlei_box"
        width="50%"
        @close="dialog_close_onfun">
        <!-- 主体部分开始 -->
        <el-form
            ref="add_fenlei_form"
            :rules="add_fenlei_form_rules"
            :model="add_fenlei_data"
            label-width="90px"
            class="el_form"
            >
            <el-form-item prop="cat_name" label="分类名称:">
                <el-input
                    v-model="add_fenlei_data.cat_name"
                ></el-input>
            </el-form-item>
            <el-form-item label="父级分类:">
                <el-cascader
                    expand-trigger="click"
                    :props="props_config"
                    :options="p_fenlei_lists"
                    v-model="select_id_keys"
                    clearable
                    change-on-select
                    @change="select_change_onfun">
                </el-cascader>
            </el-form-item>
        </el-form>
        <!-- 主体部分结束 -->
        <span slot="footer" class="dialog-footer">
            <el-button @click="is_show_add_fenlei_box = false">取 消</el-button>
            <el-button type="primary" @click="suer_add_fenlei_onfun">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        data () {
            return {
                goods_fenlei_data:[],
                total:0,
                // 列的配置对象
                column_config_data:[
                    {
                        label:'分类名称',
                        prop:'cat_name',
                        witdh:'300px'
                    },
                    {
                        label:'是否有效',
                        prop:'cat_deleted',
                        witdh:'300px',
                        type:'template',
                        template:'is_del'
                    },
                    {
                        label:'排序',
                        witdh:'300px',
                        prop:'cat_level',
                        type:'template',
                        template:'short'
                    },
                    {
                        label:'操作',
                        prop:'',
                        witdh:'300px',
                        type:'template',
                        template:'setting'
                    }
                ],
                // 列表请求参数的配置数据
                lists_req_infor:{
                    type:[3],
                    pagenum:1,
                    pagesize:4
                },
                is_show_add_fenlei_box: false,
                // 添加分类的表单数据
                add_fenlei_data: {
                    cat_name:'',
                    cat_level:'',
                    cat_pid:''
                },
                add_fenlei_form_rules:{
                    name: [
                        { required: true, message: "请输入分类名称", trigger: "blur" },
                        { min: 2, max: 7, message: "长度在2-7位", trigger: "blur" }, 
                    ]
                },
                // 父级分类的列表
                p_fenlei_lists:[],
                props_config:{
                    value:'cat_id',
                    label:'cat_name',
                    children:'children'
                },
                // 选中父级的id集合
                select_id_keys: [],
                // 测试数据
                ceshi:[
                    {
                        cat_deleted:false,
                        cat_id: 1,
                        cat_level: 0,
                        cat_name: '大家电',
                        cat_pid: 0,
                        children: [
                            {
                                cat_deleted:false,
                                cat_id: 3,
                                cat_level:1,
                                cat_name: '电视',
                                cat_pid: 1,
                            }
                        ],
                    }
                ]
            }
        },
        methods: {
            // 获取商品分类数据
            async get_goods_fenlei_data() {
                const {data: res_data} = await this.$axios.get('categories', {
                    params:this.lists_req_infor
                });
                if(res_data.meta.status != 200) return this.$Message.error('获取数据失败!');
                this.goods_fenlei_data = res_data.data.result;
                this.total = res_data.data.total;
                return this.$Message.success('获取数据成功');
            },
            // 每页显示条数发生改变时触发
            size_change_onfun(new_size) {
                this.lists_req_infor.pagesize = new_size;
                this.get_goods_fenlei_data();
            },
            // 当前页发生变化时触发
            current_change_onfun(new_pagenum) {
                this.lists_req_infor.pagenum = new_pagenum;
                this.get_goods_fenlei_data();
            },
            // 显示添加分类弹框
            async show_add_goods_fenleibox_onfun() {
                this.is_show_add_fenlei_box = true;
                // 获取所有父级分类列表
                const {data:res_data} = await this.$axios.get('categories',{
                    params:{
                        type:[2]
                    }
                });
                if(res_data.meta.status != 200) return this.$Message.error('获取数据失败!');
                this.p_fenlei_lists = res_data.data;
                return this.$Message.success('获取数据成功');
            },
            // 级联选择器发生变化触发
            select_change_onfun() {
                if(this.select_id_keys.length == 2) {
                    this.add_fenlei_data.cat_level = 2;
                    this.add_fenlei_data.cat_pid = this.select_id_keys[1];
                }
                else if(this.select_id_keys.length == 1) {
                    this.add_fenlei_data.cat_level = 1;
                    this.add_fenlei_data.cat_pid = this.select_id_keys[0];
                }
                else {
                    this.add_fenlei_data.cat_level = 0;
                    this.add_fenlei_data.cat_pid = 0; 
                }
            },
            // 关闭对话框初始化表单
            dialog_close_onfun() {
                this.$refs.add_fenlei_form.resetFields();
                this.select_id_keys = [];
            },
            // 点击确定添加分类按钮
            async suer_add_fenlei_onfun() {
                this.is_show_add_fenlei_box = false;
                // 发送添加分类的请求
                const {data:res_data} = await this.$axios.post('categories', this.add_fenlei_data);
                if(res_data.meta.status != 201) return this.$Message.error('失败啦老狗!'); 
                this.get_goods_fenlei_data();
                return this.$Message.success('给你加了，别忘了给钱!'); 
            }
        },
        mounted () {
            // 组件挂在完毕请求数据
            this.get_goods_fenlei_data();
        }
    }
</script>

<style>

</style>